<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">
          <el-form-item label="姓名：">
            <el-input v-model="listQuery.search"
                      placeholder="请输入"
                      clearable />
          </el-form-item>
        </div>
        <div class="right-box">
          <el-button size="mini"
                     @click="handleFilter">查询</el-button>
        </div>
      </template>
    </search-box>
    <div class="operate-btn-wrap">
      <el-button type="primary"
                 v-permissionCode="'system:person:add'"
                 size="mini"
                 @click="handleCreate()"
                 icon="el-icon-plus">新增</el-button>
    </div>
    <div class="table-wrap">
      <el-table :data="list"
                style="width:100%"
                element-loading-text="Loading"
                height="600">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        ></el-table-column>
        <el-table-column prop="name"
                         label="姓名">
        </el-table-column>
        <el-table-column prop="mobile"
                         label="手机号">
        </el-table-column>
        <el-table-column prop="gender"
                         label="性别">
        </el-table-column>
        <el-table-column prop="idCardNo"
                         label="身份证号">
        </el-table-column>
        <el-table-column label="操作"
                         width="110">
          <template slot-scope="scope">
            <div class="scope-operate">
              <div class="editor-box">
                <i class="el-icon-edit-outline"
                   style="color:#0095e3"
                   @click="handleUpdate(scope.row)"></i>
              </div>
              <i class="el-icon-delete"
                 @click="handleDelete(scope.row)"></i>
            </div>

          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQuery.pageNumber"
                  :limit.sync="listQuery.pageSize"
                  @pagination="getList" />
    </div>
    <CreatePerson ref="createPersonForm"
                  :text-map="textMap"
                  :dialog-status="dialogStatus"
                  :dialog-form-visible.sync="dialogFormVisible"
                  @on-fresh-list="getList" />

  </div>
</template>

<script>
import * as apiPerson from '@/api/person'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// 当然你也可以为了方便使用，将它注册到全局
import CreatePerson from '@/views/person/createPerson'
import permissionCode from '@/directive/permissionCode/index.js' // 权限判断指令
import { MessageBox } from 'element-ui'
import bus from '@/utils/eventBus'
import searchBox from '@/components/searchBox.vue'

export default {
  name: 'Person',
  components: { Pagination, CreatePerson, searchBox },
  directives: { waves, permissionCode },
  filters: {
  },
  data () {
    return {
      list: null,
      total: 0,
      listQuery: { // 查询列表时的参数对象
        pageNumber: 1,
        pageSize: 50,
        search: undefined,
        tenantId: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      }
    }
  },
  created () {
    this.getList()
    // 监听 租户改变的事件,选择不同租户后,立马刷新数据
    bus.$on('selectedTenantIdChanged', () => {
      this.getList()
    })
  },
  mounted () {
    // 测试用
    // var that = this
    // setTimeout(function() {
    //   that.dialogFormVisible = true
    // }, 5000)
    console.log("字典数据---->", this.$store.getters.dataDic)
  },
  beforeDestroy () { // 当路由切换到其他页面时触发
    bus.$off('selectedTenantIdChanged')
  },
  methods: {
    async getList () { // 获取列表数据
      this.listQuery.tenantId = this.$store.getters.selectedTenantId
      const { content } = await apiPerson.getPersonList(this.listQuery)
      this.list = content.list
      this.total = content.totalCounts
    },
    handleFilter () {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    handleCreate () {
      if (this.listQuery.tenantId == undefined) {
        MessageBox('必须先选择一个特定的租户,才能继续操作')
        return
      }
      this.$refs['createPersonForm'].clearFormData() // 直接调用子组件的method, 很方便
      this.$refs['createPersonForm'].setTenantId(this.listQuery.tenantId)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['createPersonForm'].$refs['dataForm'].clearValidate()
      })
    },
    handleUpdate (row) {
      console.log('row--->', row)
      const currentRow = Object.assign({}, row)
      this.$refs['createPersonForm'].setCurrentRow(currentRow)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['createPersonForm'].$refs['dataForm'].clearValidate()
      })
    },
    handleDelete (row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const deleteData = Object.assign({}, row) // copy obj
        apiPerson.deletePerson(deleteData.id).then(() => {
          // 刷新列表数据
          this.getList()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
.app-select {
  margin-bottom: 20px;
}
</style>
